<!--
 * @Author: daidai
 * @Date: 2022-02-20 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div class="list">
    <div class="list-header">
      <div class="no">序号</div>
      <div class="first">名称</div>
      <div class="last">车辆停留时间</div>
    </div>
    <div class="list-body">
      <vue-seamless-scroll :data="tableData" :class-option="defaultOption">
        <div class="list-item" v-for="(item, index) in tableData" :class="index % 2 == 1 ? ' deep_color' : ''"
          :key="index">
          <div class="first">
            <span class="no">{{ item.waybillNum }}</span><span class="spanText">{{ item.waybillname }}</span>
          </div>
          <div class="last">{{ item.waybillCompleteNum }}</div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: {
    vueSeamlessScroll
  },
  computed: {
    defaultOption() {
      return this.$store.state.setting.defaultOption;
    }
  },
  data() {
    return {
      tableData: [
        { waybillname: '马庄农贸市场', waybillNum: '01', waybillCompleteNum: '18h' },
        { waybillname: '电动车批发市场', waybillNum: '02', waybillCompleteNum: '16h' },
        { waybillname: '大陆司机之家', waybillNum: '03', waybillCompleteNum: '15h' },
        { waybillname: '金陵集团', waybillNum: '04', waybillCompleteNum: '14h' }
      ],
      chooseIndex: 0
    };
  },
  created() { },
  mounted() { },
  beforeDestroy() { },
  methods: {},
};
</script>
<style lang="scss" scoped>
.list {
  margin: 5px 20px 15px 20px;

  .list-header {
    width: calc(100% - 2px);
    border: 1px solid #153c81;
    display: flex;
    justify-content: center;
    height: 32px;
    line-height: 32px;
    color: rgba($color: #ffffff, $alpha: 0.8);

    .first {
      width: 64%;
      text-indent: 5em;
    }
  }

  .list-body {
    // border: 1px solid red;
    width: 100%;
    height: 170px;
    overflow: hidden;
  }

  .list-item {
    width: calc(100% - 2px);
    border: 1px solid #153c81;
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    height: 32px;
    line-height: 32px;
    color: rgba($color: #ffffff, $alpha: 0.9);
    font-weight: bold;

    .first {
      // position: relative;
      width: 60%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      &::before {
        position: absolute;
        left: -52px;
        top: 2px;
        // content: url('../../assets/img/launch/inout/icon.png');
      }

      .no {
        // position: absolute;
        // left: -48px;
        // top: 0px;
        position: relative;
        left: 20px;
        top: 0px;
        width: 25px;
        height: 24px;
        background: url(../../assets/img/launch/car/icon.png) no-repeat 1% 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .spanText {
        width: calc(100% - 25px);
        text-align: center;
        display: flex;
        justify-content: center;
        text-align: center;
      }
    }

    .last {
      width: 35%;
      text-align: right;
      padding-right: 30px;
    }
  }
}
</style>
